<template>
  <div class="main">
    <!--    <keep-alive :include="includedComponents">-->
    <!--      <router-view v-if="keepAlive" />-->
    <!--    </keep-alive>-->
    <div>
      <a-select
        allow-clear
        show-search
        default-value="wx7589397382c868ac"
        class="menu"
        placeholder="请选择菜单级别"
        @change="changeMenu"
        v-model="newAppid"
      >
        <a-select-option
          :value="item.appid"
          v-for="(item,index)  in menuList"
          :key="index"
        >
          {{ item.name }}
        </a-select-option>
      </a-select>
    </div>
    <keep-alive>
      <router-view
        v-if="keepAlive"
        :appid="newAppid"
        :menuName="menuName"
        @updateAppid="updateAppid"
      />
    </keep-alive>
    <router-view
      v-if="!keepAlive"
      :appid="newAppid"
      :menuName="menuName"
      @updateAppid="updateAppid"
    />
  </div>
</template>

<script>
import Vue from 'vue'
import { postAction, getAction } from '@/api/manage'
import { CACHE_INCLUDED_ROUTES } from '@/store/mutation-types'

export default {
  name: 'RouteView',
  props: {
    appid: {
      type: String,
      required: false,
      default: null
    }
  },
  data() {
    return {
      menuList: [],
      menuName: '江南布衣信息中心',
      urlKey: 'basemgt-wx',
      newAppid: 'wx7589397382c868ac'
    }
  },
  watch: {
    appid: {
      handler(newvalue) {
        if (newvalue) this.newAppid = newvalue
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.getMenuList()
  },
  methods: {
    getMenuList() {
      const params = {}
      try {
        postAction(`${this.urlKey}/WxConfig/findAllWxConfigList`, params).then(data => {
          if (data.code == 200) {
            this.menuList = data.data
          } else {
            this.$message.warning(data.msg || data.message)
          }
        })
      } catch (error) {
        this.$message.warning('获取菜单列表失败！')
      }
    },
    changeMenu(appid) {
      this.newAppid = appid
      this.$emit('updateAppid', appid)
      this.menuList.map(item => {
        if (item.appid == appid) {
          this.menuName = item.name
        }
      })
    },
    updateAppid(appid) {
      this.changeMenu(appid)
    }
  },
  computed: {
    //update-begin--Author:scott  Date:20201015 for：路由缓存问题，关闭了tab页时再打开就不刷新 #842
    includedComponents() {
      const includedRouters = Vue.ls.get(CACHE_INCLUDED_ROUTES)
      console.log('includedRouters：' + includedRouters)

      //如果是缓存路由，则加入到 cache_included_routes
      if (this.$route.meta.keepAlive && this.$route.meta.componentName) {
        let cacheRouterArray = Vue.ls.get(CACHE_INCLUDED_ROUTES) || []
        if (!cacheRouterArray.includes(this.$route.meta.componentName)) {
          cacheRouterArray.push(this.$route.meta.componentName)
          // cacheRouterArray.push("OnlCgformHeadList")
          console.log('Vue ls set componentName ：' + this.$route.meta.componentName)
          Vue.ls.set(CACHE_INCLUDED_ROUTES, cacheRouterArray)
          console.log('Vue ls includedRouterArrays ：' + Vue.ls.get(CACHE_INCLUDED_ROUTES))
          return cacheRouterArray
        }
      }
      return includedRouters
    },
    //update-end--Author:scott  Date:20201015 for：路由缓存问题，关闭了tab页时再打开就不刷新 #842
    keepAlive() {
      return this.$route.meta.keepAlive
    }
  }
}
</script>

<style scoped>
.menu {
  width: 200px;
  position: absolute;
  top: 15px;
  right: 400px;
  z-index: 1000;
}
</style>
<style scoped>
.menu {
  width: 200px;
  position: absolute;
  top: 15px;
  right: 400px;
  z-index: 1000;
}
</style>